@import url('https://fonts.googleapis.com/css2?family=DynaPuff:wght@400..700&family=Oswald:wght@200..700&family=Tiny5&display=swap');


  

 *,::after ::before
{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}


body
{
min-height:100vh;
background-image:url(fond\ d\'ecran.jpg.jpeg);
background-repeat:no-repeat;
background-size:cover ;
display: grid;
place-items: center;
padding: 0 1rem;
height:140%;
}
.container
{
width: 40%;
max-width: 700px;
background: rgb(255, 255 ,255, .8);
display: flex*center;
justify-content: center;
flex-direction: column;
padding: 1rem;
border-radius: 10px;
}


.container h1
{
text-align: center;
font-size: clamp(20px,5vw,30px);
margin-bottom: 0.6rem;
text-transform: uppercase;
font-weight: 900;
letter-spacing:4px;
color: midnightblue;
background-color:yellowgreen;
border-radius:10px;
font-family: "Oswald", sans-serif;
text-shadow:4px 4px 2px red;

}
.fa-solid
{
width:40px; 
height:40px;
border-radius:50%;
background-color:aqua;
}
.container h1 .fa-solid
{
display:inline-block;
place-content:center;
}
.courrier .gif
{
max-width:60px;
color: bisque;
}
form
{
width:80%;
}
form input,form textarea
{
width: 120%;
border: none;
outline: none;
border-bottom:5px solid midnightblue;
height: 50px;
margin-bottom: 1rem;
padding: 1rem;
background: none;
color: #333;
font-size: 16px;
font-style:italic;


}
form input:focus,form textarea:focus
{
border-bottom:10px solid crimson;
}
form textarea
{
height: 150px;
resize: none;
}
form input[type="submit"]
{
cursor: pointer;
border-bottom: none;
background: crimson;
color: #f1f1f1;
font-weight:none;
border-radius:10px;
transition:.2s ease-in-out;

}
form input[type="submit"]:hover
{
background: midnightblue;
border:5px solid red;


}
.success
{
font-size:2rem;
font-weight:900;
font-style:oblique;
text-align: center;
display: flex;
align-items:center;
justify-content: center;
padding:0.5rem 0;
margin-bottom: 1rem;
border-radius: 10px;
color: rgb(102,24,24);
background:rgba(90,237,64);
animation-duration:3s;
animation-name:clignoter;
animation-iteration-count:infinite;
transition:10;
}
@keyframes clignoter {
  0%   { color:white; }
  40%   {color:white; }
  100% { opacity:white; }
    
  }
  
  .validation
  {
 display:flex;
 justify-content: center;
 align-items: center;
 margin:0;
 font-size:1.2rem;
 border-radius:10px ;
 maxi-width:400px;
 background-color:aqua;
 animation-duration:1s;
 animation-name:clignoter;
 animation-iteration-count:infinite;
 transition:10;
 }
@keyframes clignoter {
  0%   { color:rgb(221, 69, 69); }
  40%   {color:red }
  100% { opacity:red }
    
 }
  .container
 {
  background-color: antiquewhite;
  padding: 20px 40px;
  border: 3px solid #fff; /* Bordure de base */
  border-radius: 10px;
  color: #fff;
  font-family: 'Arial', sans-serif;
  font-size: 2em;
  text-align: center;
  /* Effet néon avec box-shadow */
  box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px red, 0 0 40px #0f0, 0 0 70px brown;
  animation: blink-border 0.5s infinite alternate; /* Animation */
}

@keyframes blink-border {
  0% {
    /* État "allumé" avec beaucoup de flou */
    box-shadow: 0 0 5px #fff, 0 0 15px #fff, 0 0 25px rgb(0, 0, 255), 0 0 35px whitesmoke, 0 0 60px blue;
    border-color: #fff;
  }
  50% {
    /* État légèrement plus faible */
    box-shadow: 0 0 3px #fff, 0 0 10px #fff, 0 0 20px red, 0 0 30px yellowgreen;
    border-color: rgba(255, 255, 255, 0.8);
  }
  100% {
    /* État "éteint" ou presque */
    box-shadow: none; /* Ou une très faible ombre */
    border-color: rgba(255, 255, 255, 0.2);
  }
}
.submit
 {
  margin-left:4%;
  
 }
 .courrier
 {
 background-color:#faebd7;
 max-width:100%;
 height:auto;
 }
 div .g-recaptcha
 {
  display: grid;
  place-content: center;
  margin-left:20%;
   /* Pour la V2 (case à cocher) */
    transform: scale(0.7); /* Ajustez la valeur pour qu'il tienne */
    transform-origin: ; /* Centre l'échelle sur le coin supérieur gauche */
    /* Pour la V3 (invisible) ou si vous avez un conteneur spécifique */
}
  
 
 
 @media screen and (max-width: 400px) {
    .g-recaptcha {
        transform: scale(0.6); /* Réduire encore plus si nécessaire */
        display: grid;
        place-items:center;
    }
  
}
::placeholder
{
color:blue;
font-size:1.2rem;
background-color:white;
width:200px;
}

/* Définition de l'animation */
@keyframes apparaitre {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

.mon-titre span {
  display: inline-block; /* Important pour appliquer les transformations */
  opacity: 0; /* Commence invisible */
  animation: apparaitre 1s forwards; /* Applique l'animation */
  animation-delay: 15.s; /* Délai pour chaque lettre, ajuster manuellement ou via JS */
  animation-iteration-count: 8; /* Répète 4 fois */
}


/* Pour animer chaque lettre séquentiellement, on peut ajouter des délais spécifiques */
.mon-titre span:nth-child(1) { animation-delay: 0s; }
.mon-titre span:nth-child(2) { animation-delay: 0.1s; }
.mon-titre span:nth-child(3) { animation-delay: 0.2s; }
.mon-titre span:nth-child(4) { animation-delay: 0.3s; }
.mon-titre span:nth-child(5) { animation-delay: 0.4s; }
.mon-titre span:nth-child(6) { animation-delay: 0.5s; }
.mon-titre span:nth-child(7) { animation-delay: 0.6s; }
.mon-titre span:nth-child(8) { animation-delay: 0.7s; }
.mon-titre span:nth-child(9) { animation-delay: 0.8s; }
.mon-titre span:nth-child(10) { animation-delay: 0.9s; }
.mon-titre span:nth-child(11) { animation-delay: 1s; }
.mon-titre span:nth-child(12) {animation-delay:1.2s}
/* ... et ainsi de suite */
       
.mon-titre span:nth-child(1)
{
color: blue;
}
.mon-titre span:nth-child(2)
 { color: blue ;}
     
      
.mon-titre span:nth-child(3) {color: yellowgreen;text-shadow: none;}
.mon-titre span:nth-child(4) {color: burlywood;}
.mon-titre span:nth-child(5) {color: chartreuse;}
.mon-titre span:nth-child(6) {color: gray;}
.mon-titre span:nth-child(7) {color:whitesmoke;}
.mon-titre span:nth-child(8) {color: black;}
.mon-titre span:nth-child(9) {color: blue;}
.mon-titre span:nth-child(10) { color: brown;}
.mon-titre span:nth-child(11) {color: chartreuse;}
.mon-titre span:nth-child(12) {color: yellow;}

h1
{
text-align:center;
font-size: 3rem;
}